<!--理财超市首页-->
<template>
  <div>
    <div>
      <div class="topContant">
        <div style="font-size: 0.28rem;line-height: 1rem;">
          <div style="display: inline-block; margin-left: 3rem;">{{ title }}</div>
          <div style="display: inline-block; margin-left: 1.8rem;" @click="gotoMyFinancial()">我的理财</div>
        </div>
        <div class="searchBox">
          <input type="text" placeholder="请输入保险产品名称" class="searchInput">
        </div>
        <div class="condition">
          <div class="rateMsg">预期收益率</div>
          <div class="secondIcon"><img class="sortIcon" src="../../assets/img/Financial/jiantou.png"></div>
          <div class="timeMsg">期限</div>
          <div class="moneyMsg">起售金额</div>
          <div class="filterMsg">筛选</div>
          <x-button  mini plain type="primary" @click.native="showFilter = true"
          style="border:0px; height: 0.36rem; width: 0.36rem; padding: 0 0; margin-top: 0.16rem;">
            <img class="filterIcon" src="../../assets/img/Financial/shaixuan.png">
          </x-button>
          <popup v-model="showFilter" position="top" height="90%">
            <div class="screenMenu">
              <div class="scrollcontaner">
                <div v-for="(list,listIndex) in lists" :key="listIndex" class="type">
                  <h3>{{list.type}}</h3>
                  <div class="container">
                    <div v-for="(screen,screenIndex) in list.screens" :key="screenIndex" class="screen" >
                      <div class="tab" :class="screen.selected===1?'selected':''" @click="selectTab(listIndex,screenIndex)">{{screen.name}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="buttons">
                <div @click="showFilter = false" class="button">重置</div>
                <div @click="screened" class="button">确定</div>
              </div>
            </div>
          </popup>
        </div>
        <div class="screenTabsContainer" v-if="labelNames.length!==0">
          <div class="screenTabs">
            <div class="screenTab" v-for="(item, index) in labelNames" :key="index"><span>{{item}}</span><x-icon @click="screenTabClose(index)" type="ios-close-empty" size="24"></x-icon></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bodyContent" v-show="searchOnFocus" v-if="prdList.length !== 0">
      <scroller lock-x use-pullup use-pulldown @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" ref="scroller">
        <div class="box">
          <div class="productInfo" v-for="(item, index) in prdList" :key="index">
            <div @click="gotoDetail(item.lcType)">
              <div class="productName">{{item.lcName}}</div>

              <img v-if="item.icon2 === '1'" class="iconImg" src="../../assets/img/Financial/jingwai.png">
              <img v-else-if="item.icon2 === '0'" class="iconImg" src="../../assets/img/Financial/zunxiang.png">
              <div v-else class="productIcon"></div>

              <div v-if="item.lcType === '1'" class="productRate">
                <div class="productRateNum">{{item.lcRate}}</div>
                <div class="productRateMsg">预期年化收益</div>
              </div>
              <div v-if="item.lcType === '2'" class="productRate">
                <div class="productRateNum">{{item.lcMoney}}</div>
                <div class="productRateMsg">最新产品净值</div>
              </div>

              <div v-if="item.lcType === '1'" class="productDate">
                <div class="productDateTime">投资期限{{item.dayLimit}}天</div>
                <div class="productDateMoney">起购金额{{item.minMoney}}元</div>
              </div>
              <div v-if="item.lcType === '2'" class="productDate">
                <div class="productDateTime">投资币种{{item.lcCurrency}}</div>
                <div class="productDateMoney">起购金额{{item.minMoney}}元</div>
              </div>
            </div>
          </div>
          <div class="blank"></div>
        </div>
      </scroller>
    </div>
    <div class="nodata" v-if="prdList.length === 0">
      <img class="nodataImg" src="../../assets/img/Financial/nodataImg.png">
      <div class="nodataMsg">没有找到符合条件的基金</div>
      <div class="refresh" @click="getFinancialData()">刷新</div>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
export default {
  data () {
    return {
      title: '理财超市',
      showFilter: false,
      n: 10,
      searchOnFocus: true,
      prdList: [],
      lists: [{
        type: '理财类型', screens: [{name: '全部', selected: 0}, {name: '境内理财', selected: 0}, {name: '境外理财', selected: 1}]
      }, {
        type: '产品类型', screens: [{name: '全部', selected: 0}, {name: '股票型', selected: 0}, {name: '债券型', selected: 0}, {name: '混合型', selected: 0}, {name: '商品型', selected: 0}, {name: '其他', selected: 0}]
      }, {
        type: '产品系列', screens: [{name: '全部', selected: 0}, {name: '施罗德', selected: 0}, {name: '美盛', selected: 0}, {name: '贝莱德', selected: 0}, {name: '东亚联丰', selected: 0}, {name: '摩根', selected: 0}]
      }, {
        type: '币种', screens: [{name: '全部', selected: 0}, {name: '人民币', selected: 1}, {name: '美元', selected: 0}]
      }, {
        type: '风险等级', screens: [{name: '全部', selected: 0}, {name: '低风险', selected: 0}, {name: '中风险', selected: 0}, {name: '高风险', selected: 1}]
      }],
      labelNames:[] // 选定的筛选标签
    }
  },
  methods: {
    screened() { //筛选框
      let _this=this
      _this.labelNames = []
      for ( var i= 0, length= _this.lists.length;i<length; i++ ) {
        for (var j= 0, length1= _this.lists[i].screens.length;j<length1;j++ ){
          if(_this.lists[i].screens[0].selected=== 1){
            for (var n= 1,length2= _this.lists[i].screens.length;n<length2;n++){
              _this.labelNames.push(_this.lists[i].screens[n].name)
            }
            break
          }
          if(_this.lists[i].screens[0].selected=== 0){
            if(_this.lists[i].screens[j].selected=== 1){
              _this.labelNames.push(_this.lists[i].screens[j].name)
            }
          }
        }
      }
      this.showFilter = false
      console.log(_this.labelNames)
    },
    screenTabClose (index) {
      this.labelNames.splice(index,1)
    },
    gotoMyFinancial () {
      this.$router.push({name: 'MyFinancial'})
    },
    getFinancialData () {
      let l_vm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'H5PanelTest'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            l_vm.prdList = response.data.data
          } else {
            l_vm.aaa = response.data.data
          }
        }
      )
    },
    gotoDetail (type) {
      if (type === '1') {
        this.$router.push({name: 'FinancialProductDetail'})
      } else {
        this.$router.push({name: 'FinancialOverseasDetail'})
      }
    },
    loadMore () {
      setTimeout(() => {
        if (this.n < 15) {
          this.prdList = this.prdList.concat(this.prdList)
          this.n++
        }
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    refresh () {
      setTimeout(() => {
        this.prdList = this.prdList.slice(0, 10)
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroller.donePulldown()
            this.pullupEnabled && this.$refs.scroller.enablePullup()
          }, 10)
        })
      }, 2000)
    },
    changePullupStatus (enabled) {
      if (enabled) {
        this.$refs.scroller.enablePullup()
        this.pullupEnabled = true
      } else {
        this.$refs.scroller.disablePullup()
        this.pullupEnabled = false
      }
    },
    // 弹出筛选框
    selectTab (listIndex, screenIndex) {
      let screenLength = this.lists[listIndex].screens.length
      // 后面按钮 状态数组
      let backSelectTab = []
      // 如果点击了全选
      if (screenIndex === 0) {
        if (this.lists[listIndex].screens[0].selected === 1) {
          this.lists[listIndex].screens[0].selected = 0
        } else {
          this.lists[listIndex].screens[0].selected = 1
        }
      } else {
        // 如果点击的不是全选
        // 反选
        if (this.lists[listIndex].screens[screenIndex].selected === 1) {
          this.lists[listIndex].screens[screenIndex].selected = 0
        } else {
          this.lists[listIndex].screens[screenIndex].selected = 1
        }
        // console.log(backSelectTab.indexOf(-1),backSelectTab)
        // 如果之前全选
        if (this.lists[listIndex].screens[0].selected) {
          this.lists[listIndex].screens[0].selected = 0
        }
      }
      // 如果全选 其他灭
      for (var i = 1; i < screenLength; i++) {
        backSelectTab.push(this.lists[listIndex].screens[i].selected)
      }
      if (this.lists[listIndex].screens[0].selected && backSelectTab.indexOf(1) !== -1) {
        for (var j = 1; j < screenLength; j++) {
          this.lists[listIndex].screens[j].selected = 0
        }
      }
    }
  },
  created () {
    this.getFinancialData()
  }
}
</script>

<style lang = "less" scoped>
  *{
    box-sizing: border-box;
  }
  input{
    background: #fff;
  }
  .refresh{
    width: 2rem;
    font-size: 0.3rem;
    text-align: center;
    color: #fff;
    font-weight: bolder;
    margin: 0.3rem auto;
    background: #EC1B30;
    border-radius: 0.1rem;
  }
  .searchBox{
    width: 100%;
    height:1.16rem;
    background: #EAEAEA;
    font-size: 0.14rem;
  }
  .searchInput{
    width: 6.9rem;
    height: 0.8rem;
    border: none;
    margin: 0.18rem 0.3rem;
    font-size: 0.28rem;
  }
  .nodataMsg{
    text-align: center;
    font-size: 0.28rem;
    width: 100%;
    color: #333333;
  }
  .nodataImg{
    margin: 0.68rem 2.06rem 0.1rem 2.06rem;;
    height: 3.26rem;
    width: 3.38rem;
  }
  .topContant{
    position: static;
  }
  .title{
    width: 100%;
    height: 0.88rem;
    text-align: center;
    line-height: 0.88rem;
    background: #fff;
    color: #333333;
    font-size: 0.28rem;
    font-weight: bolder;
  }
  .condition{
/*    width: 92%;*/
    display: flex;
    font-size: 0.28rem;
    border-bottom: 1px solid #EAEAEA;
/*    padding-left: 0.3rem;
    padding-bottom: 0.1rem;*/
    padding: 0.2rem 0 0.1rem 0.3rem;
    background: #fff;
  }
  .rateMsg{
    padding: 0.14rem 0.085rem 0px 0rem;
  }
  .secondIcon{
    padding-top: 0.14rem;
    cursor: pointer;
    padding-right: 0.6rem;
  }
  .sortIcon{
    height: 0.28rem;
    width: 0.16rem;
    margin-top: 0.06rem;
  }
  .timeMsg{
    padding: 0.14rem 0px;
  }
  .moneyMsg{
    padding-top: 0.14rem;
    padding-left: 0.43rem;
  }
  .filterMsg{
    padding: 0.14rem 0.11rem 0rem 1.2rem;
  }
  .filterIcon{
    height: 0.36rem;
    width: 0.36rem;
    cursor: pointer;
  }
  .productList{
    width: 100%;
    background: #EAEAEA;
  }
  .box{
    background: #fff;
    margin-top: 0.2rem;
  }
  .productInfo{
    width: 92%;
    margin-left: 0.3rem;
    border-bottom: 1px solid #EAEAEA;
    height: 2.4rem;
    overflow: hidden;
  }
  .productName{
    float: left;
    font-size: 0.3rem;
    margin-top: 0.38rem;
    width: 5.4rem;
  }
  .productIcon{
    float: right;
    width: 1.27rem;
    height: 1.27rem;
  }
  .iconImg{
    float: right;
    width: 1.27rem;
    height: 1.27rem;
  }
  .productRate{
    float: left;
    margin: 0.31rem 0rem 0.38rem 0rem;
    width: 4rem;
  }
  .productRateNum{
    font-size: 0.5rem;
    color: #ff6633;
  }
  .productRateMsg{
    font-size: 0.26rem;
    color: #666666;
  }
  .productDate{
    float: left;
    margin: 0rem 0rem 0.38rem 0rem;
  }
  .productDateTime{
    font-size: 0.26rem;
    font-weight: bolder;
    margin-bottom: 0.02rem;
  }
  .productDateMoney{
    font-size: 0.26rem;
    color: #333333;
  }
  .position-vertical-demo {
    background-color: #ffe26d;
    color: #000;
    text-align: center;
    padding: 15px;
  }
  .mint-loadmore-top{
    font-size: 0.28rem;
  }
  .blank{
    height: 2rem;
  }
  /* .bodyContent{
    position:fixed;
    top: 2.8rem;
  } */
  .typeMsg{
    margin-left: 0.3rem;
  }
  /*筛选标签*/
  .screenTabsContainer{
    width: 100%;
    padding:0 .3rem;
    background-color: #ffffff;
    overflow: hidden;
  }
  .screenTabs{
    width: 100%;
    border-bottom: 1px solid #EAEAEA;
    overflow: hidden;
    padding-bottom:.2rem;
  }
  .screenTab{
    float: left;
    height: .48rem;
    padding-left: .25rem;
    padding-right: .1rem;
    margin-top: .2rem;
    margin-right:.3rem;
    background-color: #edf3f6;
    -webkit-border-radius: .24rem;
    -moz-border-radius: .24rem;
    border-radius: .24rem;
  }
  .screenTab span{
    float: left;
    line-height:.48rem;
    font-size: .26rem;
    color: #333333;
  }

  /*筛选框样式*/
  .screenMenu{
    position: relative;
    background-color: #ffffff;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
  }
  .scrollcontaner{
    position: absolute;
    top:0;
    left: 0;
    bottom: .88rem;
    overflow-y: scroll;
  }
  .type{
    font-weight:bold;
    font-size: .3rem;
    margin:.36rem auto .19rem .3rem;
  }
  .container{
    display: flex;
    flex-wrap:wrap;
  }
  .tab{
    height:.48rem;
    margin:.12rem .3rem .12rem 0;
    padding:0 .22rem;
    line-height: .48rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:.26rem;
    color: #333333;
    border:.01rem solid #cccccc;
    border-radius: .48rem;
  }
  .selected{
    background-color: #333333;
    color: #ffffff;
    border-color:#333333;
  }
  .buttons{
    position: absolute;
    left:0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: .88rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* border:.02rem solid #EAEAEA; */
  }
  .button{
    width: 50%;
    height: 100%;
    background-color: #EC1B30;
    border-top: .01rem solid #EAEAEA;
    color: #ffffff;
    line-height: .88rem;
    text-align: center;
    font-size: .34rem;
  }
  .button:first-child{
    border-right: .01rem solid #EAEAEA;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #ec1b30;
  }
</style>

<style>
  a:-webkit-any-link{
    text-decoration: none;
  }
  .xs-plugin-pulldown-up,.xs-plugin-pulldown-down, .xs-plugin-pulldown-loading{
    font-size: 0.28rem !important;
  }
  .xs-plugin-pullup-up, .xs-plugin-pullup-down, .xs-plugin-pullup-loading{
    font-size: 0.28rem !important;
  }
  .xs-plugin-pullup-undefined{
    font-size: 0.28rem !important;
    bottom: 0px !important;
  }
</style>
